<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./lib/vue-2.4.0.js"></script>
	<script src="./lib/vue-router-3.0.1.js"></script>
	<style type="text/css">
        .myactive{
        	background-color: green;
        	font-size: 30px;
        	color: red;
        	font-style: italic;
        }

        .v-enter,
        .v-leave-to{
        	opacity: 0;
        	transform: translateX(180px);
        }

        .v-enter-active,
        .v-leave-active{
        	transition: all 0.6s ease;
        }
	</style>
</head>
<body>
    <div id="app">
        <!-- 创建两个类似于a链接的占位符 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register" tag="span">注册</router-link>

        <!-- 创建一个占位符来显示longin和register -->
        <transition mode="out-in">
             <router-view></router-view>
        </transition>
    </div>

	<script>
        //创建login模板对象
        var login={
        	template:'<h1>大家好,我是登录页面</h1>'
        }

        //创建register模板对象
        var register={
            template:'<h1>大家好,我是注册页面</h1>'
        }

        //创建路由router
        var routerObj=new VueRouter({
        	routes:[
        	    // {path:'/',component:login},
        	    {path:'/',redirect:'/login'},
        	    {path:'/login',component:login},
                {path:'/register',component:register}
        	],
        	linkActiveClass:'myactive'
        })

	    //创建vue实例
        var vm=new Vue({
        	el:'#app',
        	data:{},
        	methods:{},
        	//在实例中接受routerObj
        	router:routerObj
        });
	</script>
</body>
</html>